<template>
    <div class="all">
        <div class="search" style="margin-right: 20px;">
            <el-form
                ref="form"
                :inline="true"
                :model="form"
                label-width="80px"
                size="small"
            >
                <el-form-item label="关键词:" prop="version" style="margin:20px 0 0 20px;">
                    <el-input v-model="form.keyword" placeholder="请输入" size="small"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button style="margin-left: 20px;" type="primary" size="small" @click="search"
                    >查询
                    </el-button
                    >
                    <el-button @click="resetSearch">重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div class="content">

            <el-table
                :data="memberList.items"
                size="small"
                max-height="550px"
                style="border: 1px solid #e0e0e0;width: calc(100% - 20px);margin-left: 10px;">
                <el-table-column
                    prop="id"
                    label="序号"
                    align="center"
                    width="60">
                    <template slot-scope="{ row, $index }">
                        <div>{{ $index + 1 }}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="nickname"
                    label="昵称"
                    align="left">
                </el-table-column>
                <el-table-column
                    prop="gender"
                    label="性别"
                    height="50"
                    width="100"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="headimg"
                    label="头像"
                    height="50"
                    width="160"
                    align="center">
                    <template slot-scope="row">
                        <div v-if="row.headimg">
                            <img :src="row.headimg" style="width: 50px; height: 50px;">
                        </div>
                        <div v-else style="width: 50px; height: 50px;"></div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="gradeId"
                    label="等级"
                    height="50"
                    width="160"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="isAuth"
                    label="是否认证"
                    height="50"
                    width="160"
                    align="center">
                    <template slot-scope="row">
                        {{ row.isAuth == 1 ? '是' : '否' }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="isCompany"
                    label="是否企业用户"
                    height="50"
                    width="160"
                    align="center">
                    <template slot-scope="row">
                        {{ row.isCompany == 1 ? '是' : '否' }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="mobile"
                    label="手机号"
                    height="50"
                    width="160"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="score"
                    label="积分"
                    height="50"
                    width="160"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="createTime"
                    label="创建时间"
                    height="50"
                    width="150"
                    align="center"
                >
                    <template slot-scope="{row}">
                        {{ $formatDateTime(row.createTime) }}
                    </template>
                </el-table-column>

            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="memberList.total"
                    :page-size="form.size"
                    :current-page="form.page"
                    @current-change="currentChange">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import {memberList} from "@/index/api/member/memberManage"

export default {
    data() {
        return {
            form: {
                page: 1,
                size: 10,
                keyword: null
            },
            memberList: {}
        }
    },
    mounted() {
        this.getList()
    },
    methods: {
        getList() {
            memberList(this.form).then(res => {
                if (res.code == 200) {
                    this.memberList = res.data
                }
            })
        },
        search() {
            this.getList()
        },
        resetSearch() {
            this.form.keyword = ''
            this.getList()
        },
        currentChange(val) {
            this.form.page = val
            if (this.farmList.items.length == 0) {
                this.form.page = val - 1
            }
            this.getFarmList()
        }
    },

}
</script>

<style lang="less" scoped>
.all {
    width: 100%;
    background-color: #fff;
    border-radius: 5px;

    .content {
        width: 100%;
        // height: 45vh;
        background-color: #fff;
        border-radius: 5px;

        .top {
            width: 100%;
            height: 60px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .el-button {
                margin-right: 3vw;
            }
        }
    }
}

.el-form-item {
    margin: 0px 0 0 0 !important;
}
</style>
